<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <script type="module">
    import { ajax, get, getJSON, post } from "./ajax/index.js";
    // 1.跨域是指不同域之间发送请求（浏览器默认阻止）
    // 2.https(协议):www.mooc.com（域名）:443（端口号）/course/list(路径)
    // 协议域名端口号任何一个不一样就是不同域
    // 3.跨域请求为什么会被阻止
    // 阻止跨域请求,其实是浏览器本身的一种安全策略--同源策略
    // 4.跨域解决方案
    // ①CORS跨域资源共享
    // ②JSONP
    // 1.优先使用CORS
    // Access-Control-Allow-Origin: *
    // 表明允许所有的域名来跨域请求它,*是通配符,没有任何限制
    // 只允许指定域名的跨域请求
    // Access-Control-Allow-Origin: http:..127.0.0.1:8000
    // 2.JSONP跨域原理
    // script标签跨域不会被浏览器阻止
    // JSONP主要是利用script标签加载跨域文件
    // 2.使用JSONP跨域
    // const url =
    //   "https://07e7f8e7-2349-423c-b598-0ad547432062.mock.pstmn.io/course/list";
    // post(url, {
    //   data: {
    //     username: 'zhangsan'
    //   },
    //   success(response) {
    //     console.log(response);
    //   },
    //   httpCodeError(err) {
    //     console.log("http code error", err);
    //   },
    //   error(xhr) {
    //     console.log("error", xhr);
    //   },
    //   abort(xhr) {
    //     console.log("abort", xhr);
    //   },
    //   timeout(xhr) {
    //     console.log("timeout", xhr);
    //   },
    // });

    // 使用Promise封装后的Ajax
    const url = "http://5a1304a7-219c-49e4-9f05-bc3825ac187d.mock.pstmn.io/test"
    const p = getJSON(url, {
      data: { age: 78 }
    })
    const { ERROR_HTTP_CODE, ERROR_REQUEST, ERROR_TIMEOUT, ERROR_ABORT } = p;
    p.then(response => {
      console.log(response);
    }).catch(err => {
      // console.log(err);
      switch (err.type) {
        case ERROR_HTTP_CODE:
          console.log(err.text);
          break;
        case ERROR_REQUEST:
          console.log(err.text);
          break;
        case ERROR_TIMEOUT:
          console.log(err.text);
          break;
        case ERROR_ABORT:
          console.log(err.text);
          break;
      }
    })
  </script>
</body>

</html>